﻿@inject IFlatProductsProvider FlatProductService

<div class="demo-description mw-1100">
    <h2><DemoNavLink Link="GridPagingAndScrolling#FixedColumns" />Fixed Columns</h2>
    <p>
        Our Blazor <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1" target="_blank" rel="nofollow">Data Grid</a> allows you to anchor columns to its left or rightmost edge. Fixed columns can help improve data readability as columns fixed to the right or left remain visible when users scroll the grid horizontally. To fix a column, set its <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxDataGridColumnBase-1.FixedStyle" target="_blank" rel="nofollow">FixedStyle</a>  property to <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFixedStyle" target="_blank" rel="nofollow">DataGridFixedStyle.Left</a>  or <a class="helplink" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DataGridFixedStyle" target="_blank" rel="nofollow">DataGridFixedStyle.Right</a>.
    </p>
</div>

@if (DataSource == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <DxDataGrid Data="@DataSource"
                HorizontalScrollBarMode="ScrollBarMode.Visible"
                PagerNavigationMode="PagerNavigationMode.NumericButtons"
                RowRemovingAsync="@OnRowRemoving"
                RowUpdatingAsync="@OnRowUpdating"
                CssClass="mw-1100">

        <DxDataGridCommandColumn NewButtonVisible="false" Width="100px" FixedStyle="DataGridFixedStyle.Left"></DxDataGridCommandColumn>

        <DxDataGridColumn Field="@nameof(ProductFlat.ProductName)" Caption="Product Name" Width="250px">
        </DxDataGridColumn>

        <DxDataGridCheckBoxColumn Field="@nameof(ProductFlat.Availability)" Caption="Availability" Width="110px" FixedStyle="DataGridFixedStyle.Right">
            <DisplayTemplate>
                @{
                    var id = Guid.NewGuid().ToString();
                    var inStock = (context as ProductFlat).Availability;
                    <DxCheckBox Id="@id" Checked="@inStock" Enabled="false">
                        @if (inStock)
                        {
                            <label class="form-check-label text-success" for="@id"><span>In stock</span></label>
                        }
                        else
                        {
                            <label class="form-check-label text-danger" for="@id"><span>Sold out</span></label>
                        }
                    </DxCheckBox>
                }
            </DisplayTemplate>
        </DxDataGridCheckBoxColumn>

        <DxDataGridColumn Field="@nameof(ProductFlat.Category)" Caption="Category" Width="250px"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(ProductFlat.Subcategory)" Caption="Subcategory" Width="250px"></DxDataGridColumn>
        <DxDataGridDateEditColumn Field="@nameof(ProductFlat.LastUpdated)" Caption="Last Updated" Width="250px"></DxDataGridDateEditColumn>

    </DxDataGrid>

    <CodeSnippet_Grid_FixedColumns></CodeSnippet_Grid_FixedColumns>
}

@code {
    IEnumerable<ProductFlat> DataSource;

    protected override async Task OnInitializedAsync()
    {
        DataSource = await FlatProductService.LoadAsync();
    }
    Task OnRowRemoving(ProductFlat dataItem)
    {
        return FlatProductService.Remove(dataItem);
    }
    Task OnRowUpdating(ProductFlat dataItem, IDictionary<string, object> newValue)
    {
        return FlatProductService.Update(dataItem, newValue);
    }
}
